<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>活动列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/style.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/ydui.css">

    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_cwy8y2uw4su4n29.css">
    <style>
        .zero-tip{display: none;  position: absolute;left: 50%;margin:12rem 0 0 0 ;font-size: 14px;transform: translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);color:#999;}
        .offline-bg{display: none;  position: absolute;left: 50%;margin:8rem 0 0 0 ;transform: translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);width: 6rem;height:6rem;}
        .search-box{width: 100%;text-align: center;}
        .key-word{  background: #fff; width: 90%;margin-top: 52px;height: 35px;border: 1px solid #dadada;text-align:center;border-radius: 10px;margin-left:auto;margin-right: auto; }
        .buttons-tab{margin-top: 5!important;z-index: 1;}
        .picker-modal .bar-nav { background-color: #FFFFFF;}
        #J_Address{ position: absolute;
            left: 10px;
            /* display: inline-block; */
            max-width: 100px;
            overflow: hidden;
            background: none;
            height: 45px;
            line-height: 45px;
            color: #fff;
            font-size: 16px;
            z-index: 1;
            border: none;}

        #activityList .bar-nav ~ .content{top:6.6rem;}
        .picker-columns {height: 250px;}
        .bar .button-link{font-size: 16px;padding-right: 10px; line-height: 45px;height:45px;}
    </style>
</head>

<body id="activityList">
<div class="page-group">
    <div class="page" id="page-infinite-scroll-bottom">
        <!--搜索栏内容 !-->
        <header class="bar bar-nav">
            <h1 class="title">
                <input class="pull-left"  value="全国"  id="J_Address" readonly>
                活动
                <a data-url="${basepath}/front/offline/toOfflineAdd" class="add-activity iconfont icon-gengduo pull-right"></a>
            </h1>
        </header>
        <div class="search-box">
            <input type="text" class="key-word" placeholder="请输入活动关键字" />
        </div>
        <div class="buttons-tab" style="margin-top: 46px;">
            <a href="#" class="tab-link button active" data-state="0">全部</a>
            <a href="#" class="tab-link button " data-state="2">未开始</a>
            <a href="#" class="tab-link button" data-state="3">进行中</a>
            <a href="#" class="tab-link button" data-state="4">已结束</a>
        </div>
        <!--内容部分 !-->
        <div class="content  infinite-scroll infinite-scroll-bottom" data-distance="100">
            <!--列表页面 !-->
            <img src="${staticpath}/images/offline-zero-bg.png" alt="活动" class="offline-bg"/>
            <p class="zero-tip">暂无活动！</p>
            <!--列表页面 !-->
            <div class="normal-list" data-url="${basepath}/front/offline/toOfflineDetail">
            </div>
        </div>
        <!--工具栏!-->
        <nav class="bar bar-tab" id="tool-bar">
            <a class="tab-item external " href="/toHome">
                <span class="iconfont icon-shouye"></span>

                <p class="tab-label">首页</p>
            </a>
            <a class=" tab-item love-external active" href="javascripy:;" id="loveBtn">
                <span class="iconfont icon-huodong"></span>

                <p class="tab-label">活动</p>
            </a>
            <a class="tab-item external " href="${basepath}/front/catalog/toMallList">
                <span class="iconfont  icon-shangcheng"></span>

                <p class="tab-label">商城</p>
            </a>
            <a class="tab-item external" href="${basepath}/front/account/toAccountList">
                <span class="iconfont icon-wo"></span>
                <p class="tab-label">我</p>
            </a>
        </nav>
    </div>
</div>

<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>

<script>
    $.config = {
        router: false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/offline/offline.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/ydui.citys.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/ydui.js' charset='utf-8'></script>
<script>
    jQuery('.key-word').keyup(function(){
        var key=jQuery(this).val();

        jQuery('.list-item').hide();
        if(key==''){
            jQuery('.list-item').show();
        }
        jQuery('.list-item:contains("'+key+'")').show();

    });
    jQuery('.key-word').blur(function(){
        var key=jQuery(this).val();

        jQuery('.list-item').hide();
        if(key==''){
            jQuery('.list-item').show();
        }
        jQuery('.list-item:contains("'+key+'")').show();
    });
    jQuery('.key-word').change(function(){
        var key=jQuery(this).val();

        jQuery('.list-item').hide();
            if(key==''){
            jQuery('.list-item').show();
        }
        jQuery('.list-item:contains("'+key+'")').show();
    });

    $.init();
</script>
<script>
    <#--地址控件-->
    !function () {
        var jQuerytarget = jQuery('#J_Address');

        jQuerytarget.citySelect();

        jQuerytarget.on('click', function (event) {
            event.stopPropagation();
            jQuerytarget.citySelect('open');
        });

        jQuerytarget.on('done.ydui.cityselect', function (ret) {
            jQuery(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);

            var province,city,area;
//            城市 为 ‘全境’ 则 查全省   地区为‘全境’ 查全市
            if(ret.area=='全境'&&ret.city=='全境'){
                province=ret.provance, city='',area='';
            }else if(ret.area=='全境'&&ret.city!='全境'){
                province=ret.provance,city=ret.city,area='';
            }

            jQuery.ajax({
                type: "GET",
                url: "/front/offline/selectAllList",
                data: {
                    status: 'pass',
                    province:province,
                    city:city,
                    area:area
                },
                dataType: 'json',
                success: function (data) {
                    var activityList = data.data,
                            activityHtml = '';
                    //判断data.data是否有值，没有值得情况下应该要显示图片与提示
                    if (activityList == '' || activityList == null) {
                        jQuery('.offline-bg').show();
                        jQuery('.zero-tip').show();
                    }else{
                        jQuery('.offline-bg').hide();
                        jQuery('.zero-tip').hide();
                    }
                    jQuery.each(activityList, function (i, o) {
                        if (o.status == 5) {

                        } else {
                            activityHtml += '<div data-id="'
                            + o.id + '"data-type="'
                            +o.type+'" class="list-item" data-state="'
                            + o.status + '"><h1>'
                            + o.name + '</h1> ';
                            if(o.area==''||o.area==null){
                                activityHtml+=' <h2 class="area">' +o.province+' '+o.city+' '+' '+o.address+ '</h2> ';
                            }else{
                                activityHtml+=' <h2 class="area">' + o.province+' '+o.city+' '+o.area+' '+o.address + '</h2> ';
                            }

                            activityHtml+= '<p>'
                            + o.organizeName + '</p> <p>'
                            + o.createTime + '</p><div class="join-num"> <p>'
                            + o.accountNum + '</p> <span>已报名</span> </div></div>'
                        }

                    })
                    jQuery('.normal-list').html(activityHtml);
                    //活动地址处理

                    //募捐活动 隐藏地址
                    jQuery('div[data-type="2"]').children('.area').css('visibility','hidden');
                    //不通过 也显示为 已关闭
                    jQuery('.list-item[data-state="6"]').attr('data-state', '5');
                    //待审核不实现
                    jQuery('.list-item[data-state="1"]').hide();
                    jQuery('.list-item[data-state="5"]').hide();
                }
            })

        });
    }();
</script>
</body>
</html>